<template>
	<view class="container">
		<head-box></head-box>
		<view class="banner">
			<image src="../../static/img/jylybanner.png" mode="widthFix"></image>
		</view>
		<view class="quan tab-botton">
			<view class="quntuanListPage-main-header">
				<div class="quntuanListPage-main-title">交友联谊</div>
			</view>
			<view class="item"   @tap="onMainTitle">
				<view class="box c1">
					<text class="h2">交友活动报名</text>
					<text class="p1 mt">优质的相亲交友活动开放报名哦！</text>
					<image src="../../static/img/jyll_ico3.png" mode=""></image>
				</view>
			</view>
			<view class="item"   @tap="$api.handleMenu('/pages/fellowship/fellowship')">
				<view class="box c2">
					<text class="h2">组织联谊</text>
					<text class="p1 mt">行业、单位间的联谊活动来看我哦！</text>
					<image src="../../static/img/jyll_ico2.png" mode=""></image>
				</view>
			</view>
<!--			<view class="item"   @tap="$api.handleMenu('/pages/webview/webview?url=http://m.hy.hzgh.org')">-->
			 <view class="item"   @tap="getGroupUrlCbId('1397816749650382850')">
				<view class="box c3">
					<text class="h2" >交友工作室</text>
					<text class="p1 mt">为你提供贴心的一对一服务！</text>
					<image src="../../static/img/jyll_ico1.png" mode=""></image>
				</view>
			</view>
		</view>

		<tabs-box></tabs-box>
	</view>
</template>

<script>
	import {onMainTitle,getGroupsCategoryList} from '@/common/type'
  import { type1 } from '@/mixins/type-1'
  import {getGroupUrlCbId} from '@/common/groupUrl'
  import {getMoveTypeRefresh,gpMoveTypeList} from '@/api/home-type'
  export default{
    mixins:[type1],
		data(){
			return {
        isType: '12', //判断是那个索引
			}
		},
    computed:{
      isNavList(){
        const p = []
        this.navList.map(item=>{
          if(item.type!=='19'){
            p.push(item)
          }
        })
        return p
      },
    },
    onLoad(){
      this.getMoveTypeRefresh()
    },
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
		methods: {
      //首页分类-获取
      getMoveTypeRefresh(){
        const token = uni.getStorageSync('token')
        if (token) {
          getMoveTypeRefresh().then(res=>{
            const {code,result} = res
            if(result.length || result!=='' || result.length>0){
              this.resultInterestActivityList(result)
            }  else {
              this.gpMoveTypeList()
            }

          })
        } else {
          this.gpMoveTypeList()
        }

      },
      //首页分类-分页列表查询不用登录
      gpMoveTypeList(){
        gpMoveTypeList({pageSize:999}).then((res) => {
          const { result : { records : result } } = res
          this.resultInterestActivityList(result)
        })
      },
      //活动集市
      resultInterestActivityList(result){
        const list = getGroupsCategoryList(result)
        let ls = []
        const abcList = list[0].navList;
        abcList.map(item=>{
          if(item.code==='113'){
            ls.push({
              cate_name:item.name,
              icon:this.$imageUrl+item.icon,
              isShow:true,
              moveType:this.isType,
              type:this.isType,
            })
          }

        })
        this.navList = ls
      },
      //跳转不同的分组url的id
      getGroupUrlCbId(id){
        this.$clickGpScenePv('hyw')
       return getGroupUrlCbId(id)
      },
      //交友活动报名跳转
      onMainTitle(){
        const data = onMainTitle(this.isNavList)
        this.$api.handleMenu(data)
      }
		}
	}
</script>

<style lang="stylus" scoped>
	.container *
		box-sizing border-box

	.top
		height 100rpx
		background-color #007AFF
		display flex
		justify-content space-between
		padding 0 30rpx
		align-items center
		image
			width 22rpx
			height 40rpx
		.h2
			color #fff
			font-size 30rpx
	.banner
	{
		width 100%;
		padding 30rpx 30rpx 0 30rpx;
		image{
			width 100%
			border-radius 10rpx;
		}
	}
	.quntuanListPage-main-title{

		font-size: 32rpx;
		color: #333;
		font-weight: 600;
		border-left: 6rpx solid #0071fc;
		padding-left: 20rpx;
		margin-left 30rpx;
	}
	.quan
		float left
		width 100%
		padding-top 40rpx
		margin-bottom 160rpx
		.item
			float left
			width 100%
			display flex
			margin-top 27rpx
			padding 0 30rpx
			.box
				flex 1 1 auto
				position relative
				padding 20rpx
				border-radius 10rpx
				width 50%
				min-height :160rpx
				.h2
					font-size 34rpx
					padding-left 30rpx
					font-weight bold
					opacity 0.8
				.p1
					display block
					font-size 26rpx
					color #333333
					margin-top 6rpx
					width 80%
					line-height 40rpx
					padding-left 30rpx
					opacity 0.5
					&.mt
						margin-top 34rpx
				image
					position absolute
					right 20rpx
					bottom 0rpx
					width 150rpx
					height 150rpx
				&.c1
					background-image linear-gradient(left, #d0e3ff, #accbf7)
				&.c2
					background-image linear-gradient(left, #aafea6, #90fe8a)
				&.c3
					background-image linear-gradient(left, #fee5a9, #ffdb85)
				&.c4
					background-image linear-gradient(left, #d0e3ff, #accbf7)


</style>
